<template>
    <div class="comp-assets" :class="{'comp-assets--black': theme === 'black'}" v-if="isLoading === false">
        <div class="asset-box asset-box--unlogin" v-if="hasLogin === false">
            <a href="./register.html" class="ui-btn">Sign Up</a>
            <a href="./login.html" class="link gray">Sign In</a>
        </div>
        <div class="asset-box asset-box--login" v-if="hasLogin === true">
            <div class="info"
                 :class="{hover: isShowSlider === true}"
                 @click="toggle()"
                 v-on:mouseenter="enter()"
                 v-on:mouseleave="leave()">
                <i class="icon icon-person"></i>&nbsp;
                <span class="info-text">Account</span>
                <i class="icon icon-arrow-right"></i>
                <i class="i-hover" v-show="isShowSlider === true"></i>
                <div class="info-tip js-asset-tip" :class="{'info-tip--short':unReadMsgNum<=10}" v-if="isUnReadMsg">
                    <span :class="{'absolute-center':unReadMsgNum<=10}">{{unReadMsgNum}}</span>
                </div>
                <transition
                        name="showAssets"
                        enter-active-class="animated fadeIn"
                        leave-active-class="animated fadeOut">
                    <div class="my-assets-code" v-show="isShowSlider === true">
                        <div class="assets-header">
                            <p class="header-title fn-ellipsis">{{email}}</p>
                            <p class="header-tip"
                               v-if="isDetection===false">
                                <a href="javascript:;" class="tip-link color-blue"
                                   @click="reloadCertificate()">Verify Now</a>
                            </p>
                            <p class="header-tip" v-else>
                                <span class="text">{{name}}</span>
                                <i class="icon icon-sfrz"></i>
                            </p>
                        </div>
                        <div class="my-assets-pandect">
                            <div class="total-assets">
                                <div class="attestation-left">
                                    <i class="icon icon-zichan attestation-left"></i><span class="text">Total Asset</span>
                                </div>
                                <div class="attestation-right">{{totalValue}} USD</div>
                            </div>
                            <ul class="my-assets-ul">
                                <li class="attestation">
                                    <div class="attestation-left">
                                        <p class="attestation-left-up">Available</p>
                                        <p class="attestation-left-down">Held</p>
                                    </div>
                                    <div class="attestation-right">
                                        <p class="attestation-left-up attestation-right-up">{{filter.floorFix(assets.usd.amountAvailable)}} USD</p>
                                        <p class="attestation-left-down attestation-right-down color-gray">{{filter.floorFix(assets.usd.amountLock)}} USD</p>
                                    </div>
                                </li>
                                <li class="attestation">
                                    <div class="attestation-left">
                                        <p class="attestation-left-up">Available</p>
                                        <p class="attestation-left-down">Held</p>
                                    </div>
                                    <div class="attestation-right">
                                        <p class="attestation-left-up attestation-right-up">{{filter.floorFix(assets.gop.amountAvailable)}} GOP</p>
                                        <p class="attestation-left-down attestation-right-down color-gray">{{filter.floorFix(assets.gop.amountLock)}} GOP</p>
                                    </div>
                                </li>
                                <li class="attestation">
                                    <div class="attestation-left">
                                        <p class="attestation-left-up">Available</p>
                                        <p class="attestation-left-down">Held</p>
                                    </div>
                                    <div class="attestation-right">
                                        <p class="attestation-left-up attestation-right-up">{{filter.floorFix(assets.btc.amountAvailable)}} BTC</p>
                                        <p class="attestation-left-down attestation-right-down color-gray">{{filter.floorFix(assets.btc.amountLock)}} BTC</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="attestation-tip-box">
                            <a class="attestation-tip attestation-tip-down" href="javascript:;"
                               @click="reloadMessage($event)">
                                <i class="icon icon-xiaoxi"></i>
                                <div class="attestation-tip-left attestation-up-alert">Messages</div>
                                <div class="attestation-tip-right" v-if="isUnReadMsg===true">{{unReadMsgNum}}</div>
                            </a>
                        </div>
                        <div class="attestation-tip-box">
                            <a class="attestation-tip attestation-tip-down" href="javascript:;"
                               @click="reloadAccount()">
                                <i class="icon icon-shezhi"></i>
                                <div class="attestation-tip-left attestation-up-alert">Settings</div>
                            </a>
                        </div>
                        <div class="attestation-tip-box logout">
                            <a class="logout-btn" @click="logout()">
                                <i class="icon icon-tuichu"></i><span class="text">Logout</span>
                            </a>
                        </div>
                    </div>
                </transition>
            </div>
        </div>
    </div>

</template>

<script type="text/babel">

    import commonService from '../common/commonService';
    import MathTool from '../../grsc-base/util/mathtool';
    import filter from '../../grsc-base/util/filter';
    import lib from '../common/lib';

    export default {
        data: function () {
            return {
                isLoading: true,
                hasLogin: false,
                isShowSlider: false,

                filter: filter,
                assets: {
                    usd: {
                        "amountAvailable": '--',
                        "amountLock": '--',
                        'total': '--'
                    },
                    gop: {
                        "amountAvailable": '--',
                        "amountLock": '--',
                        'total': '--'
                    },
                    btc: {
                        "amountAvailable": '--',
                        "amountLock": '--',
                        'total': '--'
                    }
                },
                currentPrice: 0.0000,//果仁现价
                currentGopPrice: 0.0000,//果仁现价
                currentBtcPrice: 0.0000,//果仁现价

                unReadMsgNum: 0,//
                unReadMsgList: null,

                user: null,

                personageText: "",
                name: '',
                email: '',
                isUnReadMsg: false,
                isEntrustNum: false,
                isDetection: true,
                attestationText: '',

                totalValue: '--'
            };
        },
        props: {
            theme: {
                default: 'white'
            }
        },
        watch: {
            assets: {
                handler(newValue, oldValue) {

                },
                deep: true
            }
        },
        created: function () {
            this.isLoading = true;

            let that = this;
            $(document).off('$$assets.MyAssets').on('$$assets.MyAssets', () => {
                let header = {
                    'account-no': this.email
                };
                commonService.getTotalAssets({},header).done((rep) => {
                    if (rep.code === window.CODE.SUCCESS) {
                        that._doAssetData(rep.data);
                    } else {
                        window.error(rep.msg);
                    }
                });
            });

            // 个人信息
            commonService.basic().done((rep) => {
                if (rep.code === window.CODE.SUCCESS) {
                    this.hasLogin = true;
                    let user = rep.data;

                    this.user = user;

                    // 已经实名
                    if (lib.hasAuth() === true) {
                        this.personageText = user.name;
                        this.name = user.name;
                        this.isDetection = true;
                    } else {    // 未实名
                        this.personageText = user.account;
                        this.isDetection = false;
                    }
                    this.email = user.account;
                    this.fetchAssetsAndMessage();
                }
            }).always(rep => {
                this.isLoading = false;
            });

        },

        methods: {

            _doAssetData(data) {
                let temp;
                $.map(data, (item, index) => {
                    if (item.assetCode === 'USD') {
                        temp = this.assets.usd;
                        temp.amountAvailable = item.amountAvailable;
                        temp.amountLock = item.amountLock;
                        temp.total = MathTool.add(item.amountAvailable, item.amountLock);

                    } else if (item.assetCode === 'GOP') {
                        temp = this.assets.gop;
                        temp.amountAvailable = item.amountAvailable;
                        temp.amountLock = item.amountLock;
                        temp.total = MathTool.multiplication(this.currentGopPrice, MathTool.add(item.amountAvailable, item.amountLock));
                    } else {
                        temp = this.assets.btc;
                        temp.amountAvailable = item.amountAvailable;
                        temp.amountLock = item.amountLock;
                        temp.total = MathTool.multiplication(this.currentBtcPrice, MathTool.add(item.amountAvailable, item.amountLock));
                    }
                });
                this.totalValue = this._getTotalValue();
            },

            _getTotalValue() {
                let totalValue = 0;
                $.map(this.assets, (item, key) => {
                    if ($.isNumeric(item.total) === true) {
                        totalValue = MathTool.add(totalValue, item.total);
                    }
                });
                return filter.floorFix(totalValue);
            },

            toggle() {
                if (this.isShowSlider === true) {
                    this.isShowSlider = false;
                } else {
                    this.isShowSlider = true;
                }
            },

            enter() {
                this.isShowSlider = true;
            },

            leave() {
                setTimeout(()=>{
                    this.isShowSlider = false;
                },0)
            },

            reloadMessage($event) {
                $event.preventDefault();
                let location = window.location;
                if (location.pathname.indexOf('account.html') >= 0 && location.hash.indexOf('message') >= 0) {
//                    location.href = './account.html#/message/total';
//                    location.reload();
                    this.reload();
                } else {
                    this.leave();
                    location.href = './account.html#/message/total';
                }
            },
            reloadAccount(){
                let location = window.location;
                if (location.pathname.indexOf('account.html') >= 0 && location.hash == '#/') {
                    this.reload();
                } else {
                    this.leave();
                    location.href = './account.html#/';
                }
            },
            reloadCertificate(){
                let location = window.location;
                if (location.pathname.indexOf('account.html') >= 0 && location.hash.indexOf('certification') >= 0) {
                    this.reload();
                } else {
                    this.leave();
                    location.href = './account.html#/certification';
                }
            },

            _connect(assets){
                // FIXME 待后端更新后, 类型再去变化
//                socketController.onMarketDetail((data) => {
//                    this.isLoading = false;
//                    let payload = data.payload;
//                    //最新价
//                    this.currentGopPrice = filter.floorFix(payload.pr_ne);
//                    this._doAssetData(assets);
//                }, 'USD_GOP');   // 'gopusd'
//
//                socketController.onMarketDetail((data) => {
//                    this.isLoading = false;
//                    let payload = data.payload;
//                    //最新价
//                    this.currentBtcPrice = filter.floorFix(payload.pr_ne);
//                    this._doAssetData(assets);
//                }, 'USD_BTC');   // 'btcusd'
            },

            fetchAssetsAndMessage() {
                let header = {
                    'account-no': this.email
                };
                commonService.getTotalAssets({},header).done((rep) => {
                    if (rep.code === window.CODE.SUCCESS) {
                        this._connect(rep.data);
                    }
                }).fail((rep) => {
                    //TODO
                });

                //消息
                commonService.onLoopUnReadMessage((rep) => {
                    if (rep.code === window.CODE.SUCCESS) {
                        this.unReadMsgNum = rep.data.length;
                        this.unReadMsgList = rep.data.list;
                        if (this.unReadMsgNum > 0) {
                            this.isUnReadMsg = true;
                        } else {
                            this.isUnReadMsg = false;
                        }
                    } else {
                        this.isUnReadMsg = false;
                        this.unReadMsgNum = 0;
                        this.unReadMsgList = [];
                    }
                });
            },
            /**
             * 登出
             */
            logout() {
                let header = {
                    'account-no':this.email
                };
                commonService.logout({},header).done(rep => {
                    if (rep.code === window.CODE.SUCCESS) {
                        lib.doLogout();
                    } else {
                        window.error(rep.msg, () => {
                            window.location.href = "./index.html";
                        });
                    }
                }).fail(rep => {
                    window.error(rep.msg, () => {
                        window.location.href = "./index.html";
                    });
                });
            }
        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">
    .comp-assets {

        /*color: #333;*/

        .my-assets-code {
            color: #777;
            position: absolute;
            vertical-align: middle;
            font-size: 12px;
            border: 1px solid #f3f3f3;
            border-radius: 4px 0 4px 4px;
            /*box-shadow: 0 0 8px #f3f3f3;*/
            width: 336px;
            background-color: #fff;
            top: 34px;
            right: -1px;
            z-index: -1;
            transition-duration: 0.3s;
        }

        .asset-box {
            .i-hover {
                position: absolute;
                background-color: #fff;
                top: 30px;
                right: -1px;
                height: 5px;
                width: 132px;
                border-right: 1px solid #f3f3f3;
            }
            .info {
                border: 1px solid #e6e6e6;
                .icon {
                    vertical-align: middle;
                }
            }
            .hover {
                border: 1px solid #f3f3f3;
                /*box-shadow: 0 0 8px #f3f3f3;*/
                background-color: #fff;
                /*.icon-person, .icon-arrow-right, .info-text{*/
                /*color:#777;*/
                /*}*/
                .info{
                    /*background-color: #fcfcfc;*/
                }
            }
        }

        .assets-header {
            padding: 24px 24px 16px 24px;
            border-bottom: 1px solid #eaeaea;
            .header-title {
                font-size: 18px;
                font-weight: bold;
            }
            .header-tip {
                margin-top: 8px;
                .text {
                    vertical-align: middle;
                }
                .icon {
                    margin-left: 8px;
                    vertical-align: middle;
                    font-size: 20px;
                    color: #0b95ff;
                }
            }
        }

        .attestation {
            background-color: #fafafb;
        }

        .attestation-tip-box {
            border-top: 1px solid #eaeaea;
        }

        .asset-box {
            .text {
                vertical-align: middle;
            }
            &--login {

            }
            &--unlogin {
                padding-top: 2px;
                > .ui-btn {
                    height: 32px;
                    line-height: 32px;
                }
                > .link {
                    margin-left: 24px;
                }
                > .blue-border{
                    border: 1px solid #0B95FF;
                    border-radius: 4px;
                    padding: 9px 18px;
                    &:hover{
                        background-color: rgba(11, 149, 255, 0.3);
                    }
                }
            }

            .info {
                cursor: default;
                position: relative;
                padding: 6px 8px;
                background-color: transparent;
                border-radius: 2px;
                box-sizing: border-box;
                font-size: 16px;
                &-text {
                    padding: 0 6px 0 4px;
                    cursor: default;
                    font-size: 13px;;
                    vertical-align: text-top;
                }
                &-tip{
                    .absolute-center{
                        position: absolute;
                        top:50%;
                        left: 50%;
                        transform:translate(-50%,-50%) ;
                    }
                    position: absolute;
                    top: -11px;
                    right: 7px;
                    padding: 3px 8px;
                    border-radius: 10px;
                    background-color: #ff6e0d;
                    font-size: 12px;
                    line-height: 12px;
                    color: #fff;
                    &--short{
                        padding: 10px;
                    }
                }
                .color-white{
                    color:#ffffff;
                }
                .body, .my-assets-pandect {
                    margin-bottom: 16px;
                    .total-assets {
                        display: flex;
                        font-size: 13px;;
                        line-height: 50px;
                        height: 50px;
                        .icon-zichan {
                            margin-left: 20px;
                            font-size: 22px;
                            margin-right: 12px;
                        }
                        .attestation-left {
                            vertical-align: middle;
                        }
                        .attestation-right {
                            margin-right: 16px;
                            color: #ff6e0d;
                            font-weight: bold;
                        }
                    }
                    .my-assets-ul {
                        .attestation {
                            margin-top: 8px;
                            padding: 16px;
                        }
                    }
                }
                .footer {

                }
                .animated {
                    animation-duration: 0.5s;
                }
                .fadeOut {
                    animation-duration: 0.2s;
                }

            }
        }

        .attestation {
            padding: 24px 24px 16px 24px;
            display: flex;
            line-height: 1;
            align-items: center;
        }

        .color-gray {
            color: #999999;
        }

        .color-orang {
            color: #ff6e0d;
        }

        .color-blue {
            color: #2796fd;
        }

        .font-gray{
            color:#dddddd;
        }

        .attestation-fontBig {
            font-size: 13px;;
        }

        .attestation-left {
            justify-content: flex-start;
        }

        .attestation-cursor {
            cursor: pointer;
        }

        .attestation-left-up {
            flex: 1;
            text-align: left;
        }

        .attestation-left-down {
            text-align: left;
            margin-top: 10px;
            font-size: 12px;
        }

        .attestation-right {
            flex: 1;
            justify-content: flex-end;
            text-align: right;
            padding-top: 2px;
        }

        .my-assets-hrDotted {
            width: 81.25%;
            height: 1px;
            border: none;
            border-top: 1px dotted #e6e6e6;
            margin: 0 auto;
        }

        .my-assets-ul {

            margin: -8px 16px 0 40px;
        }

        .my-assets-li-pandect {
            font-size: 13px;;
        }

        .attestation-right-up {
            text-align: right;
        }

        .attestation-right-down {
            text-align: right;
        }

        .attestation-tip-box {
            font-size: 13px;;
            .attestation-left {
                vertical-align: middle;
            }
            .icon {
                font-size: 22px;
                vertical-align: middle;
                margin-right: 12px;
            }
            &:hover {
                .icon {
                    color: #ffffff;
                }
            }
            .attestation-tip {
                color:#777777;
                padding: 18px 20px;
                display: flex;
                align-content: center;
                line-height: 22px;
                &:hover {
                    background-color: #2796fd;
                    color: #fff;
                    cursor: pointer;
                    .attestation-tip-right {
                        color: #fff;
                    }
                }
                .attestation-tip-left {
                    flex: 1;
                    justify-content: flex-start;
                    text-align: left;
                }
                .attestation-tip-right {
                    flex: 1;
                    justify-content: flex-end;
                    text-align: right;
                    color: #2796fd;
                }
            }
        }

        .logout {
            text-align: center;
        }

        .logout-btn {
            display: inline-block;
            width: 100%;
            padding: 16px 0;
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
            background-color: #fafafb;
            cursor: pointer;
            &:hover {
                background-color: #ff6e0d;
                cursor: pointer;
                color: #ffffff;
                i {
                    color: #ffffff;
                }
            }
        }

        &--black {
            $color-border: #4c5053;
            color: #fff;
            a {
                color: #fff;
            }
            .icon {
                color: #fff;
            }
            .asset-box {
                .info.hover {
                    border: 1px solid rgba(0, 0, 0, 0.8);
                    background-color: rgba(0, 0, 0, 0.8);
                    color: #fff;
                }
                .i-hover {
                    background-color: rgba(0, 0, 0, 0.8);
                    border-right: 1px solid rgba(0, 0, 0, 0.8);
                }
            }
            .assets-header {
                border-bottom: 1px solid $color-border;
            }
            .my-assets-code {
                background-color: rgba(0, 0, 0, 0.8);
                color: #fff;
                border: 0 none;
            }
            .attestation {
                background-color: #232426;
            }

            .attestation-tip-box {
                border-top: 1px solid $color-border;
                .attestation-tip{
                    color:#ffffff;
                }
            }
            .logout-btn {
                background-color: #232426;
                color: #fff;
            }
        }


    }
</style>